window.vm = new Vue({
  el: '#app',
  template: '#anchored-heading-template',
  data: {
    addBtnState: true,
    aDatas: [],
    standard: [{
      name: '规格1',
      datas: [],
      deletaState: true
    }]
  },
  computed: {
    datas() {
      var text = '';
      var datas = []
      var standard = this.standard
      var len = standard.length;
      (function recursively(index, vhtml) {
        if (index >= len) return false;
        let tags = standard[index].datas
        tags = !tags.length ? [''] : tags
        for (var i = 0; i < tags.length; i++) {
          text = vhtml + (index === 0 ? '' : ',') + tags[i];
          if (index === len - 1) {
            datas.push(text.split(','))
          }
          recursively(index + 1, text);
        }
      }(0, ''));
      return datas
    }
  },
  methods: {
    onInputFocus(e) {
      var ele = e.target
      if (ele.nodeName.toLowerCase() !== 'input') {
        ele.parentNode.querySelector('input').focus()
      } else {
        ele.focus()
      }
    },
    onInputData(e, index) {
      var value = e.target.value
      if (e.type === 'keyup') {
        (value === '' && this.standard[index].deletaState) && (this.standard[index].datas.splice(-1, 1))
        this.standard[index].deletaState = value === '' ? true : false
      } else if (e.type === 'input') {
        this.standard[index].deletaState = false
      }
    },
    onDataDeleteItem(i, index) {
      this.standard[index].datas.splice(i, 1)
    },
    onSubmitData(e, index) {
      var value = e.target.value
      var datas = this.standard[index].datas
      if (!value) return false
      var state = true
      for (var i = 0; i < datas.length; i++) {
        if (value === datas[i]) {
          state = false
          break
        }
      }
      if (!state) {
        e.target.value = ''
        return false
      }
      this.standard[index].datas.push(value)
      e.target.value = ''
      this.standard[index].deletaState = true
    },
    onRemoveItem(index) {
      this.addBtnState = true;
      (this.standard.length > 1) && this.standard.splice(index, 1)
    },
    onAddItem() {
      (this.standard.length < 3) && this.standard.push({
        name: '规格' + (this.standard.length + 1),
        deletaState: true,
        datas: []
      });

      (this.standard.length === 3) && (this.addBtnState = false)
    }
  },
  created() {},
  mounted() {}
})
